<%--
  Created by IntelliJ IDEA.
  User: jia
  Date: 2018/4/23
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <!--可以省略版本号-->
    <script type="text/javascript" src='webjars/jquery/1.11.1/jquery.js'></script>
    <script type="text/javascript" src='webjars/sockjs-client/1.0.2/sockjs.min.js'></script>
    <script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel='stylesheet' href='<%=basePath%>webjars/bootstrap/3.3.5/css/bootstrap.min.css'>
    <script src="<c:url value="/static/stomp/stomp.js" />"></script>

</head>
<body>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="connectAny" onclick="connectAny();">ConnectAny</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="update">
        <h1>内容随时更新</h1>
        <textarea id="text" rows="15",cols="10"></textarea>
    </div>
    <br><br>
    <div id="conversationDiv">
        <label>What is your name?</label>
        <input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">Send</button>
        <label>用户认证发送</label>
        <input type="text" id="authenText"/>
        <button id="sendNameByAuthen" onclick="sendNameByAuthen();">Send</button>
        <p id="response"></p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        //当页面加载的时候建立随时更新的连接，如果后台sendOnAnyway()方法修改了内容
        //可以随时更新
        connectAny();
        //checkoutUserlist();
    });

    //ajax 访问函数
    /*   function checkoutUserlist(){
     var userid=1;
     // alert("request for user list by ajax.");
     var url = "<c:url value='/feed' />"; //请求的地址
     $.post(url,{
     greeting:"hello xiaotang" //[逗号 连接 ]
     },
     function(data){ // 回调函数 .
     alert(data);
     },"json");
     }*/

    var stompClient = null;
    var socket = null;
    var href = '${ctx}/hello';
    function setConnected(connected) {
        if(!connected){
            socket.close();
        }
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        document.getElementById('response').innerHTML = '';
    }

    //点击连接按钮的事件，
    function connect() {
        //设置端点地址
        socket = new SockJS(href);
        //连接stomp
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            setConnected(true);
            //订阅/topic/greetings
            stompClient.subscribe('/topic/greetings', function (greeting) {
                //alert(JSON.parse(greeting.body).content);
                //alert(greeting);
                //alert(greeting.body);
                //alert(JSON.parse(greeting.body).message);
                //alert(JSON.parse(greeting));
                showGreeting(JSON.parse(greeting.body).message);
            });
            //订阅/app/marco
            stompClient.subscribe('/app/marco', function (greeting) {
                alert(JSON.parse(greeting.body).message);
                showGreeting(JSON.parse(greeting.body).message);

            });

            alert('connected:' + frame);
            //需求：只有认证的用户才能订阅到消息,如果以/user开头，会以特定的方式处理该订阅
            //UserDestinationMessageHandler的主要任务是将用户消息重新路由到某个用户独有
            //的目的地上。在处理订阅的时候，它会将目标地址中的“/user”前缀去掉，并基于用户的会话
            //添加一个后缀。例如，对“/userqueuenotifications”的订阅最后可能路由到名
            //为“queuenotifications-user6hr83v6t”的目的地上
            stompClient.subscribe('/user/queue/authen',function (greeting) {
                alert(greeting);
               showGreeting(JSON.parse(greeting.body).message);
            });

        });
    }
    //发送姓名
    function sendName() {
        var name = document.getElementById('name').value;
        //第一个参数：json 负载消息发送的 目的地； 第二个参数：是一个头信息的Map，
        // 它会包含在 STOMP 帧中；第三个参数：负载消息；
        stompClient.send("/app/hello", {}, JSON.stringify({'name': name}));
    }

    //发送认证信息
    function sendNameByAuthen() {
        var name = document.getElementById('authenText').value;
        //第一个参数：json 负载消息发送的 目的地； 第二个参数：是一个头信息的Map，
        // 它会包含在 STOMP 帧中；第三个参数：负载消息；
        stompClient.send("/app/authen", {}, JSON.stringify({'uId': name}));
    }
    //在应用的任何地方发送消息,内容实时更新，如果其他地方有人修改了内容，这边展示时不需要刷新页面，会自动更新
    function connectAny() {
        alert("connecAny!");
        var incoming=null;
        socket = new SockJS(href);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            setConnected(true);
            console.log('Connected: ' + frame);
            alert("Connected:" + frame);
            stompClient.subscribe('/user/queue/authenOnAnyway',function (greeting) {
                alert();
                alert(greeting);
                showGreeting(JSON.parse(greeting.body).message);
            });
            alert();
            //订阅/topic/feed,有更新时随时更新
            stompClient.subscribe('/topic/feed', function (greeting) {
                incoming=greeting;
                alert(JSON.parse(greeting.body).message);
                //showGreeting(JSON.parse(greeting.body).message);
                //连接建立后更新内容
                function update() {
                    $("#text").val("");
                    $("#text").val(JSON.parse(incoming.body).message);
                }
                update();
            });
            //在应用的任意地方认证


        });

    }
    //点击断开连接按钮
    function disconnect() {
        setConnected(false);
        alert("断开连接。。。");
        console.log("Disconnected");
    }

    //在div中显示聊天
    function showGreeting(message) {
        var response = document.getElementById('response');
        var p = document.createElement('p');
        p.style.wordWrap = 'break-word';
        p.appendChild(document.createTextNode(message));
        response.appendChild(p);
    }
</script>
</body>
</html>
